Security News
Oracle Drags Its Feet in the JavaScript Trademark Dispute
Oracle seeks to dismiss fraud claims in the JavaScript trademark dispute, delaying the case and avoiding questions about its right to the name.
By Sarah Gooding - Feb 07, 2025
New Case Study:See how Anthropic automated 95% of dependency reviews with Socket.Learn More →
react-frame-component
Advanced tools
react-frame-component
React component to wrap your application or component in an iFrame for encapsulation purposes
What is react-frame-component?
The react-frame-component package allows you to render React components within an iframe. This can be useful for isolating styles, scripts, or for embedding third-party content within your React application.
What are react-frame-component's main functionalities?
Basic Usage
This feature allows you to render a simple React component inside an iframe. The Frame component wraps its children and renders them within an iframe.
import Frame from 'react-frame-component';
function App() {
return (
<Frame>
<div>Hello from inside the iframe!</div>
</Frame>
);
}Custom Head Content
This feature allows you to add custom content to the head of the iframe, such as stylesheets or scripts. The FrameContextConsumer provides access to the iframe's document and window objects.
import Frame, { FrameContextConsumer } from 'react-frame-component';
function App() {
return (
<Frame head={<><link rel="stylesheet" href="styles.css" /></>}>
<FrameContextConsumer>
{({ document, window }) => (
<div>Hello with custom head content!</div>
)}
</FrameContextConsumer>
</Frame>
);
}Styling Isolation
This feature allows you to isolate styles within the iframe, preventing them from affecting the rest of your application. This is useful for embedding third-party content or for creating isolated style environments.
import Frame from 'react-frame-component';
import './App.css';
function App() {
return (
<Frame>
<div className="isolated-style">This is styled in isolation!</div>
</Frame>
);
}Other packages similar to react-frame-component
react-iframe
The react-iframe package allows you to embed an iframe within your React application. It is more focused on embedding external URLs rather than rendering React components within the iframe. It does not provide the same level of integration with React components as react-frame-component.
react-iframe-resizer-super
The react-iframe-resizer-super package provides a React wrapper for the iframe-resizer library, which allows for dynamic resizing of iframes. While it focuses on resizing and communication between the iframe and the parent, it does not offer the same component rendering capabilities as react-frame-component.
react-portal
The react-portal package allows you to render React components into a DOM node that exists outside the DOM hierarchy of the parent component. While it provides a way to render components outside the main DOM tree, it does not specifically target iframes like react-frame-component.
React <Frame /> component
This component allows you to encapsulate your entire React application or per component in an iFrame.
npm install --save react-frame-component
How to use:
import Frame from 'react-frame-component';
Go check out the demo.
const Header = ({ children }) => (
<Frame>
<h1>{children}</h1>
</Frame>
);
ReactDOM.render(<Header>Hello</Header>, document.body);
Or you can wrap it at the render call.
ReactDOM.render(
<Frame>
<Header>Hello</Header>
</Frame>,
document.body
);
Props:
head
head: PropTypes.node
The head prop is a dom node that gets inserted before the children of the frame. Note that this is injected into the body of frame (see the blog post for why). This has the benefit of being able to update and works for stylesheets.
initialContent
initialContent: PropTypes.string
Defaults to '<!DOCTYPE html><html><head></head><body><div></div></body></html>'
The initialContent props is the initial html injected into frame. It is only injected once, but allows you to insert any html into the frame (e.g. a head tag, script tags, etc). Note that it does not update if you change the prop. Also at least one div is required in the body of the html, which we use to render the react dom into.
mountTarget
mountTarget: PropTypes.string
The mountTarget props is a css selector (#target/.target) that specifies where in the initialContent of the iframe, children will be mounted.
<Frame
initialContent='<!DOCTYPE html><html><head></head><body><h1>i wont be changed</h1><div id="mountHere"></div></body></html>'
mountTarget='#mountHere'
>
</Frame>
contentDidMount and contentDidUpdate
contentDidMount: PropTypes.func
contentDidUpdate: PropTypes.func
contentDidMount and contentDidUpdate are conceptually equivalent to
componentDidMount and componentDidUpdate, respecitvely. The reason these are
needed is because internally we call ReactDOM.render which starts a new set of
lifecycle calls. This set of lifecycle calls are sometimes triggered after the
lifecycle of the parent component, so these callbacks provide a hook to know
when the frame contents are mounted and updated.
Accessing the iframe's window and document
The iframe's window and document may be accessed via the React context values window and document respectively.
const MyComponent = (props, context) => {
const {
document: iframeDocument,
window: iframeWindow
} = context;
return (<...rendered jsx.../>);
};
MyComponent.contextTypes = {
window: PropTypes.any,
document: PropTypes.any
};
More info
I wrote a blog post about building this component.
License
Copyright 2014, Ryan Seddon. This content is released under the MIT license http://ryanseddon.mit-license.org
FAQs
React component to wrap your application or component in an iFrame for encapsulation purposes
The npm package react-frame-component receives a total of 0 weekly downloads. As such, react-frame-component popularity was classified as not popular.
We found that react-frame-component demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 1 open source maintainer collaborating on the project.
Package last updated on 18 Jan 2018
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Related posts
Security News
Linux Foundation Warns Open Source Developers: Compliance with Sanctions Is Not Optional
The Linux Foundation is warning open source developers that compliance with global sanctions is mandatory, highlighting legal risks and restrictions on contributions.
By Sarah Gooding - Feb 06, 2025
Security News
Maven Central Adds Sigstore Signature Validation
Maven Central now validates Sigstore signatures, making it easier for developers to verify the provenance of Java packages.
By Sarah Gooding - Feb 06, 2025